<template>
  <div class="body">
    <div class="container" >
      <div class="card" v-for="item in fakeData" :key="item.id" @click="goJZ()">
        <div class="content">
          <div>{{ item.name }}</div>
        </div>
      </div> 
    </div>
  </div>
</template>

<script setup>
import VanillaTilt from "vanilla-tilt";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const goJZ = () => {
    router.push('parentRehabilitationTraining')
}

const fakeData = [
  { id: 1, name: 'Ax学员' },
  { id: 2, name: 'Bx学员' },
  { id: 3, name: 'Bx学员' },
  { id: 4, name: 'Cx学员' },
  { id: 5, name: 'Dx学员' },
  { id: 6, name: 'Ex学员' },
  { id: 7, name: 'Fx学员' },
  { id: 8, name: 'Gx学员' },
  { id: 9, name: 'Hx学员' },
  { id: 10, name: 'Ayy学员' },
  { id: 11, name: 'Ayy学员' },
  { id: 12, name: 'Byy学员' },
  { id: 13, name: 'Byy学员' },
  { id: 14, name: 'Cyy学员' },
  { id: 15, name: 'Dyy学员' },
  { id: 16, name: 'Eyy学员' },
  { id: 17, name: 'Fyy学员' },
  { id: 18, name: 'Gyy学员' },
  { id: 19, name: 'Hyy学员' }
];
</script>

<style scoped>
.body {
  /* 100%窗口高度 */
  min-height: 100vh;
  /* 弹性布局 水平+垂直居中 */
  display: flex;
  justify-content: center;
  /* align-items: center; */
  background-color: rgb(86, 56, 106);
}
.container {
  margin: 10vh;
  width: 50vw;
  display: flex;
  /* grid-template-columns: repeat(2, 1fr); */
  /* align-items: center;  */
  flex-wrap: wrap;
  gap: 1vh;
  z-index: 1;
}
.container .card {
  /* 相对定位 */
  width: 15vw;
  height: 10vh;
  background-color: rgb(83, 116, 64);
  border-radius: 1vh;
  /* 阴影 */
  /* 溢出隐藏 */
  display: flex;
  justify-content: center;
  align-items: center;

  /* 背景模糊 */
  backdrop-filter: blur(5px);
}
</style>